<template>
	<div class="page-header-index-wide">
		<a-row :gutter="24">
			<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
				<chart-card :loading="loading" title="累计收益" :total="'￥'+statics.totalPrice">
					<a-tooltip title="指标说明" slot="action">
						<a-icon type="info-circle-o" />
					</a-tooltip>
					<div>
						<trend flag="up" style="margin-right: 16px;">
							<span slot="term">昨日收益</span>
							{{statics.zrPrice}}
						</trend>
						<trend flag="down">
							<span slot="term">今日收益</span>
							{{statics.todayPrice}}
						</trend>
					</div>
					<template slot="footer">日均收益<span>￥ {{statics.dayAvgPrice}}</span></template>
				</chart-card>
			</a-col>
			<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
				<chart-card :loading="loading" title="累计用户" :total="statics.totalUser | NumberFormat">
					<a-tooltip title="指标说明" slot="action">
						<a-icon type="info-circle-o" />
					</a-tooltip>
					<div>
						<trend flag="up" style="margin-right: 16px;">
							<span slot="term">昨日新增人数</span>
							{{statics.zrUser}}
						</trend>
						<trend flag="down">
							<span slot="term">今日新增人数</span>
							{{statics.todayUser}}
						</trend>
					</div>
					<template slot="footer">日均新增人数<span>{{statics.dayAvgUser}}</span></template>
				</chart-card>
			</a-col>
			<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
				<chart-card :loading="loading" title="支付笔数" :total="statics.totalPayCount | NumberFormat">
					<a-tooltip title="指标说明" slot="action">
						<a-icon type="info-circle-o" />
					</a-tooltip>
					<div>
						<trend flag="up" style="margin-right: 16px;">
							<span slot="term">昨日支付笔数</span>
							{{statics.zrPayCount}}
						</trend>
						<trend flag="down">
							<span slot="term">今日支付笔数</span>
							{{statics.todayPayCount}}
						</trend>
					</div>
					<template slot="footer">支付转化率<span>%{{statics.payConversionRate}}</span></template>
				</chart-card>
			</a-col>
			<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
				<chart-card :loading="loading" title="累计订单数" :total="statics.totalOrderCount">
					<a-tooltip title="指标说明" slot="action">
						<a-icon type="info-circle-o" />
					</a-tooltip>
					<div>
						<trend flag="up" style="margin-right: 16px;">
							<span slot="term">待发货</span>
							{{statics.beOrderCount}}
						</trend>
						<trend flag="down">
							<span slot="term">待签收</span>
							{{statics.qsOrderCount}}
						</trend>
					</div>
					<template slot="footer">今日订单数<span>{{statics.todayOrderCount}}</span></template>
				</chart-card>
			</a-col>
		</a-row>

		<a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
			<div class="salesCard">
				<a-tabs default-active-key="1" size="large"
					:tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
					<!-- <div class="extra-wrapper" slot="tabBarExtraContent">
						<div class="extra-item">
							<a>今日</a>
							<a>本周</a>
							<a>本月</a>
							<a>本年</a>
						</div>
						<a-range-picker :style="{width: '256px'}" />
					</div> -->
					<a-tab-pane loading="true" tab="抽奖销售额" key="1">
						<a-row>
							<a-col :xl="22" :lg="12" :md="12" :sm="24" :xs="24">
								<bar title="销售额排行" :dataSource="lotteryData" />
							</a-col>
							<!-- <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
								<rank-list title="门店销售排行榜" :list="rankList" />
							</a-col> -->
						</a-row>
					</a-tab-pane>
					<a-tab-pane tab="抽纸条销售额" key="2">
						<a-row>
							<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
								<bar title="销售额排行" :dataSource="noteData" />
							</a-col>
							<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
								<rank-list title="纸条分布地区" :descript="'男：'+manNumber+'，女：'+womanNumber"
									:list="rankList" />
							</a-col>
						</a-row>
					</a-tab-pane>
				</a-tabs>
			</div>
		</a-card>

		<!-- <a-row>
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" title="最近一周访问次数统计" :style="{ marginTop: '24px' }">
          <a-row>
            <a-col :span="6">
              <head-info title="今日访问IP数" :content="loginfo.todayIp"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="environment" style="font-size: 24px" />
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info title="今日访问次数" :content="loginfo.todayVisitCount"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="team" style="font-size: 24px" />
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info title="访问总次数" :content="loginfo.totalVisitCount"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="rise" style="font-size: 24px" />
              </a-spin>
            </a-col>
          </a-row>
          <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
        </a-card>
      </a-col>
    </a-row> -->
	</div>
</template>

<script>
	import ChartCard from '@/components/ChartCard'
	import ACol from "ant-design-vue/es/grid/Col"
	import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
	import MiniArea from '@/components/chart/MiniArea'
	import MiniBar from '@/components/chart/MiniBar'
	import MiniProgress from '@/components/chart/MiniProgress'
	import RankList from '@/components/chart/RankList'
	import Bar from '@/components/chart/Bar'
	import LineChartMultid from '@/components/chart/LineChartMultid'
	import HeadInfo from '@/components/tools/HeadInfo.vue'

	import Trend from '@/components/Trend'
	import {
		getAction,
		postAction
	} from '@/api/manage'
	export default {
		name: "IndexChart",
		components: {
			ATooltip,
			ACol,
			ChartCard,
			MiniArea,
			MiniBar,
			MiniProgress,
			RankList,
			Bar,
			Trend,
			LineChartMultid,
			HeadInfo
		},
		data() {
			return {
				loading: true,
				center: null,
				loginfo: {},
				visitFields: ['ip', 'visit'],
				visitInfo: [],
				url: {
					getAnalysis: '/admin/analysis/getAnalysis',
					getLotteryHistogram: '/admin/analysis/getLotteryHistogram',
					getNoteHistogram: '/admin/analysis/getNoteHistogram',
					getNoteAnalysis: '/admin/analysis/getNoteAnalysis'
				},
				statics: {},
				lotteryData: [],
				noteData: [],
				rankList: [],
				manNumber: 0,
				womanNumber: 0
			}
		},
		created() {
			setTimeout(() => {
				this.loading = !this.loading
			}, 1000)
			this.initLogInfo();
			this.getLotteryHistogram()
			this.getNoteHistogram()
			this.getNoteAnalysis()
		},
		methods: {
			initLogInfo() {
				getAction(this.url.getAnalysis, null).then(res => {
					this.statics = res.result
				}).catch(e => {
					this.$message.error('发生异常!')
				})
			},
			getLotteryHistogram() {
				getAction(this.url.getLotteryHistogram, null).then(res => {
					let data = res.result
					let arr = [{
							x: '1月',
							y: data.one
						}, {
							x: '2月',
							y: data.two
						}, {
							x: '3月',
							y: data.three
						}, {
							x: '4月',
							y: data.four
						}, {
							x: '5月',
							y: data.five
						}, {
							x: '6月',
							y: data.six
						}, {
							x: '7月',
							y: data.seven
						}, {
							x: '8月',
							y: data.eight
						}, {
							x: '9月',
							y: data.nine
						}, {
							x: '10月',
							y: data.ten
						}, {
							x: '11月',
							y: data.eleven
						},
						{
							x: '12月',
							y: data.twelve
						}
					]
					this.lotteryData = arr
				}).catch(e => {
					this.$message.error('发生异常!')
				})
			},
			getNoteHistogram() {
				getAction(this.url.getNoteHistogram, null).then(res => {
					let data = res.result
					let arr = [{
							x: '1月',
							y: data.one
						}, {
							x: '2月',
							y: data.two
						}, {
							x: '3月',
							y: data.three
						}, {
							x: '4月',
							y: data.four
						}, {
							x: '5月',
							y: data.five
						}, {
							x: '6月',
							y: data.six
						}, {
							x: '7月',
							y: data.seven
						}, {
							x: '8月',
							y: data.eight
						}, {
							x: '9月',
							y: data.nine
						}, {
							x: '10月',
							y: data.ten
						}, {
							x: '11月',
							y: data.eleven
						},
						{
							x: '12月',
							y: data.twelve
						}
					]
					this.noteData = arr
				}).catch(e => {
					this.$message.error('发生异常!')
				})
			},
			getNoteAnalysis() {
				getAction(this.url.getNoteAnalysis, null).then(res => {
					let data = res.result
					if (data.length != 0) {
						this.manNumber = data[0].manNumber
						this.womanNumber = data[0].womanNumber
						data.forEach(item => {
							let obj = {
								name: item.city,
								total: item.cityNumber
							}
							this.rankList.push(obj)
						})
					}
				}).catch(e => {
					this.$message.error('发生异常!')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.circle-cust {
		position: relative;
		top: 28px;
		left: -100%;
	}

	.extra-wrapper {
		line-height: 55px;
		padding-right: 24px;

		.extra-item {
			display: inline-block;
			margin-right: 24px;

			a {
				margin-left: 24px;
			}
		}
	}

	/* 首页访问量统计 */
	.head-info {
		position: relative;
		text-align: left;
		padding: 0 32px 0 0;
		min-width: 125px;

		&.center {
			text-align: center;
			padding: 0 32px;
		}

		span {
			color: rgba(0, 0, 0, .45);
			display: inline-block;
			font-size: .95rem;
			line-height: 42px;
			margin-bottom: 4px;
		}

		p {
			line-height: 42px;
			margin: 0;

			a {
				font-weight: 600;
				font-size: 1rem;
			}
		}
	}
</style>
